<template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide 
        v-for="item of result.recommend" 
        :key="item.goodsId">
        <van-image :src="$utils.$filterImgUrl(item.image)" />
        <p class="goodsName center">{{item.goodsName}}</p>
        <p class="price center">
          {{$utils.$toRmb($utils.$toFixed(item.mallPrice))}}
          ({{$utils.$toRmb($utils.$toFixed(item.price))}})
        </p>
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
    props:{
        result:{
            type:Object,
            required:true
        }
    },
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30,
      },
    };
  }
};
</script>

<style scoped>
.swiper .center{
    text-align: center;
}
</style>
